<template>
  <div class="tag-dynamic-wrapper">
    <v-header ref="head" :title="tag.name" :showBackground="showHeaderBackground" :fixed="true"></v-header>

    <dynamic-list
      ref="dynamicList"
      :list="dynamicList"
      :pullDownRefresh="false"
      :pullUpLoad="true"
      @onPullingUp="onPullingUp"
      @scroll="scroll"
      style="overflow: hidden; height: 100%;">
      <div slot="head" ref="top" class="top" v-lazy:background-image="tag.thumbUrl">
        <div class="wrapper" :style="{paddingTop: paddingTop + 'px'}">
            <p style="text-align: center; margin: 25px;">#{{tag.name}}#</p>
        </div>
      </div>
    </dynamic-list>
  </div>
</template>

<script>
import VHeader from '@/components/v-header/v-header'
import dynamicList from '@/pages/meiTu/dynamicList/dynamicList'

import { isIphoneX } from '@/assets/js/brower'
import axios from '@/api/axiosApi'
import defaultAvatar from '@/assets/img/default_avatar.png'
import { QINIU_PREFIX } from '@/api/config'
import { Masker } from 'vux'

export default {
  data () {
    return {
      showHeaderBackground: false,
      tag: {},
      dynamicList: [],
      pageNum: 1
    }
  },
  components: {
    VHeader, dynamicList, Masker
  },
  created () {
    this.paddingTop = 40
    if (isIphoneX()) {
      this.paddingTop += 34
    } else {
      this.paddingTop += 24
    }

    this._getTagInfo()
    this._getTagDynamic()
  },
  methods: {
    _getTagInfo () {
      axios.get(this, `/v1/tag`, {
        id: this.$route.params.tagId
      }, (data) => {
        this.tag = data[0]
      })
    },
    _getTagDynamic (isFirst) {
      const _self = this
      axios.get(_self, '/v1/dynamic', {
        tagIds: this.$route.params.tagId,
        pageNum: _self.pageNum
      }, (data) => {
        if (data.length === 0) {
          if (_self.pageNum > 1) {
            _self.pageNum--
            if (_self.$refs.dynamicList) {
              _self.$refs.dynamicList.$refs.scroll.hiddenPullUpLoad()
            }
          }
          return
        }
        let temp = []
        data.forEach(item => {
          let tmpHeadUrl = defaultAvatar
          if (item.headUrl) {
            if (item.headUrl.indexOf(QINIU_PREFIX) > -1) {
              tmpHeadUrl = item.headUrl + '-bheader'
            } else {
              tmpHeadUrl = item.headUrl
            }
          }
          temp.push({
            user: {
              id: item.publisher,
              nickname: item.nickname,
              headUrl: tmpHeadUrl,
              signature: item.signature || '',
              local: parseInt(item.local)
            },
            product: {
              id: item.productId,
              thumblUrl: item.thumbUrl,
              name: item.name,
              address: item.address,
              type: item.type
            },
            dynamic: {
              id: item.id,
              content: item.content,
              atlas: item.atlas ? item.atlas.split(';') : '',
              publishAddress: item.publishAddress,
              tags: item.tagNames ? item.tagNames.split(';') : '',
              tagIds: item.tagIds ? item.tagIds.split(';') : '',
              latitude: item.publishLatitude,
              longitude: item.publishLongitude
            },
            other: {
              collectionType: item.collection !== 0,
              starType: item.star !== 0,
              collectionNum: item.collectionSum,
              starNum: item.starSum,
              // shareNum: item.shareCount,
              commentNum: item.commentCount,
              followStatus: item.follower === 'NO' ? 0 : 1
            }
          })
        })
        _self.dynamicList = _self.dynamicList.concat(temp)
      })
    },
    scroll (position, directionY) {
      if (position.y <= (this.$refs.head.$el.clientHeight - this.$refs.top.clientHeight)) {
        this.showHeaderBackground = true
      } else {
        this.showHeaderBackground = false
      }
    },
    onPullingUp () {
      this.pageNum++
      this._getTagDynamic()
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/css/variable.styl'

.tag-dynamic-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: $color-background;
  z-index: 101;

  .top {
    position: relative;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
    overflow: hidden;
    .wrapper {
      background: rgba(0, 0, 0, 0.35);
      padding-left: 15px;
      padding-right: 15px;
      padding-bottom: 7px;
      color: #fff;
      .head {
        img {
          width: 60px;
          height: 60px;
          border-radius: 50%;
        }
      }

      .num {
        display: flex;
        padding-left: 18px;
        margin-top: 5px;
        margin-bottom: 5px;
        height: 50px;
        .item {
          width: 65px;
          text-align: center;
          font-size: 14px;

          p {
            line-height: 25px;
          }
        }

        .diliver {
          width: 1px;
          height: 21px;
          margin: auto 0;
          background: #fff;
        }
      }

      .btn {
        display: flex;
        align-items: flex-end;
        padding-bottom: 8px;
        .litter-button {
          padding: 0 11px;
          width: fit-content;
          height: 18px;
          line-height: 18px;
          border: 1px solid #fff;
          border-radius: 3px;
          color: #fff;
          font-size: 12px;
          float: right;
          margin-left: 8px;
        }
      }
    }
  }
}
</style>
